<template>
  <el-button circle @click="handleRefresh" :title="title" :loading="loading" :disabled="disabled" v-hasPermi="hasPermi"
    class="refresh-button">
    <el-icon>
      <Refresh />
    </el-icon>
  </el-button>
</template>

<script setup lang="ts">
interface Props {
  title?: string;
  loading?: boolean;
  disabled?: boolean;
  hasPermi?: string[];
}

interface Emits {
  (e: 'refresh'): void;
}

const props = withDefaults(defineProps<Props>(), {
  title: '刷新',
  loading: false,
  disabled: false,
  hasPermi: () => ['project:list']
});

const emit = defineEmits<Emits>();

const handleRefresh = () => {
  emit('refresh');
};
</script>

<style scoped>
.refresh-button {
  width: 28px;
  height: 28px;
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  transition: all 0.2s;
}

.refresh-button:hover {
  border-color: #409eff;
  background: #ecf5ff;
  color: #409eff;
}
</style>
